<template>
	<view class="">
		<u-navbar title="消息列表" :placeholder="true" leftIconColor="#fff" titleStyle="color: #fff" bgColor="#2172FC"
			:autoBack="true">
			<template #right>
				<u-tag text="全部已读" plain size="mini" type="success" @click="rightClick"></u-tag>
			</template>
		</u-navbar>
	</view>
	<view class="p-10">
		<view class="message" v-if="list.length > 0">
			<view class="message-list flex p-10 m-between s-center" v-for="(item,index) in list"
				@click="goDetail(item)">
				<view class="left">
					<view class="title fw"> {{item.businessTypeName}} </view>
					<view class="content">通知: {{item.messageInfo}} </view>
				</view>
				<view class="right">
					<u-badge :isDot="true" :type="item.messageState == 1 ? 'success' : 'error'"></u-badge>
				</view>
			</view>
		</view>
		<u-empty v-else mode="data">
		</u-empty>
		<u-modal :show="show" :title="title" @confirm="confirmRead" @cancel="cancel"
			:showConfirmButton="showConfirmButton" :showCancelButton="showCancelButton">
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref,
		unref
	} from "vue";
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import {
		readMessage,
		getMesData
	} from '@/api/message.js'
	// 点击全部删除
	let show = ref(false),
		list = ref([]),
		title = ref('提醒'),
		type = ref(''),
		content = ref(''),
		messageId = ref([]),
		showConfirmButton = ref(true),
		showCancelButton = ref(false)
	// 全部已读消息
	const rightClick = () => {
		messageId.value = unref(list).filter(i => i.messageState == 0).map(j => j.id)
		if (unref(messageId).length == 0) {
			uni.showToast({
				title: '暂无未读消息'
			})
			return
		}
		uni.showModal({
			title: '提示',
			content: "确认要已读全部消息吗",
			success() {
				// 删除逻辑
				console.log('确认');
				confirmRead()
			}
		})
	}
	// 确认已读
	const confirmRead = async () => {
		try {
			const {
				code
			} = await readMessage({
				ids: unref(messageId)
			})
			if (code == 200) {
				uni.showToast({
					title: '已读'
				})
				show.value = false
				getListData(type.value)
			}
		} catch (e) {
			//TODO handle the exception
			show.value = false
		}
	}
	const cancel = async () => {
		show.value = false
	}
	// 打开消息详情
	const goDetail = (item) => {
		messageId.value = [item.id]
		if (item.messageState == 1) {
			showConfirmButton.value = false
			showCancelButton.value = true
		} else {
			showConfirmButton.value = true
		}
		show.value = true
		content.value = `<strong>[双防平台--${item.messageTitle}]</strong><br>
		            <span style="color:green">尊敬的的用户：您好！${item.messageInfo}</span><br>
					类型：${item.messageTitle}<br>
					下发时间：${item.createTime}<br>
					读取时间：${item.messageReadTime ? item.messageReadTime : ''}<br>
					状态：${item.messageState == 1 ? '已读' : '未读'}`
	}
	const getListData = async (type) => {
		try {
			const {
				data = []
			} = await getMesData({
				type
			})
			list.value = data
		} catch (e) {
			//TODO handle the exception
		}
	}
	onLoad((e) => {
		type.value = e.type
		getListData(type.value)
	})
</script>
<style lang="scss" scoped>
	.message {
		background-color: #fff;
		border-radius: 10px;
		padding: 20rpx;

		&-list {
			background: #F5F7FE;
			margin-top: 20rpx;

			&:first-child {
				margin-top: 0;
			}

			.content {
				overflow: hidden; //超出隐藏
				// white-space: nowrap;//超出换行
				text-overflow: ellipsis; //文字超出省略号
				-o-text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2; //文字行数
			}
		}

		:deep(.u-badge--dot) {
			width: 30rpx;
			height: 30rpx;
		}
	}
</style>